import { pxChangeRem } from "@/utils";
import useFetchStats, { useFetchStatsRefs } from "./useFetchStats";
import { useSelMonRefs } from "../components/Moon/useSelMon";
import { useSelWkRefs } from "../components/Circ/useSelWk";
interface TabOption {
  title: string;
  name: string;
}
const useAppTabs = defineStore("app-tabs", () => {
  const { updateParams } = useFetchStats();
  const { params, requiredKeys } = useFetchStatsRefs();
  const { curMon } = useSelMonRefs();
  const { curWk } = useSelWkRefs();
  const curAppCpt = ref("All");
  const { t } = useI18n();
  const tabsOptions = ref<TabOption[]>([
    {
      title: t("title08"),
      name: "All"
    },
    {
      title: t("title09"),
      name: "Moon"
    },
    {
      title: t("title10"),
      name: "Circ"
    }
  ]);
  function setCurAppCpt(name: string) {
    curAppCpt.value = name;
    setParams(name);
  }
  function setParams(name: string) {
    switch (name) {
      case "All":
        requiredKeys.value = ["start_year", "end_year"];
        break;
      case "Moon":
        requiredKeys.value = ["start_year", "end_year", "start_month"];
        break;
      case "Circ":
        requiredKeys.value = ["start_year", "end_year", "start_weekday"];
        break;
    }
    // updateParams({
    //   ...params.value,
    //   start_month: curMon.value,
    //   start_weekday: curWk.value
    // });
  }
  const tabConfig = {
    swipeable: true,
    "swipe-threshold": 1,
    animated: false,
    ellipsis: false,
    shrink: false,
    duration: 0.3,
    style: {
      // "--van-tabs-nav-background": "#f7f7f7",
      "--van-tabs-bottom-bar-height": "0px",
      "--van-tab-line-height": pxChangeRem(30),
      "--van-tabs-line-height": pxChangeRem(30),
      margin: `${pxChangeRem(20)} auto 0`
      // width: pxChangeRem(362),
    },
    onChange: (name: string) => {
      setCurAppCpt(name);
      setParams(name);
      updateParams({
        ...params.value,
        start_month: curMon.value,
        start_weekday: curWk.value
      });
    }
  };

  return {
    tabsOptions,
    tabConfig,
    curAppCpt,
    setCurAppCpt
  };
});
export const useAppTabsRefs = () => storeToRefs(useAppTabs());

export default useAppTabs;
